<template>
    <div class="rightKs">
        <ThemeTitle :title="title"/>
        <!-- 实时预警 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">实时预警</div>
            </div>
        </div>  
        <!-- 实时预警 -->
        <div class="realTime">
            <div class="kuangshan">
                <div class="kuangshanL">
                    矿山
                </div>
                <div class="kuangshanR">
                    <div v-for="(item,index) of kuangshanList" :key="index">
                        <div>{{item.name}}</div>
                        <div>{{item.value}}</div>
                    </div>
                </div>
            </div>
            <div class="weikuang">
                <div class="weikuangL">
                    尾矿
                </div>
                <div class="weikuangR">
                    <div v-for="(item,index) of weikuangList" :key="index">
                        <div>{{item.name}}</div>
                        <div>{{item.value}}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 报警趋势分析 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">报警趋势分析</div>
            </div>
            <!-- tabs -->
            <div class="timeTabs">
                <div v-for="(item,index) of timeList" :key="index">
                    {{item}}
                </div>
            </div>
        </div>
        <!-- 报警趋势分析chart -->
        <div id="callPoliceChart"></div>

        <!-- 井下人员定位预警 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">井下人员定位预警</div>
            </div>
        </div>

        <!-- 井下人员定位预警表格 -->
        <div class="wellTable">
            <table border="1">
                <tr>
                    <th>矿井名称</th>
                    <th>定员人数</th>
                    <th>超时报警</th>
                    <th>超员报警</th>
                    <th>本月累计报警</th>
                </tr>
                <tr v-for="(item,index) in tableList" :key="index">
                    <td v-for="(item1,index1) in item" :key="index1">
                        {{item1}}
                    </td>
                </tr>
            </table>
        </div>

        <!-- 风险趋势预测 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">风险趋势预测</div>
            </div>
        </div>
        <!-- 风险趋势预测列表 -->
        <div class="fengxianList">
            <div v-for="(item,index) in fengxianList" :key="index">
                {{item}}
            </div>
        </div>

        <!-- 视频查询 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">视频查询</div>
            </div>
        </div>
        <!-- 视频查询列表 -->
        <div class="videoQuery"> 
            <div class="videoList">
                <div class="videoListItem" v-for="(item,index) in videoList" :key="index">
                    {{item}}
                </div>
            </div>
            
            <div class="video">
                <img/>
            </div>
        </div>
    </div>
</template>

<script>
    import ThemeTitle from "../../common/ThemeTitle"
    import {
        defineComponent,
        getCurrentInstance,
        onMounted,
        ref,
        provide 
    } from 'vue'
    import { useRouter } from 'vue-router'
    export default {
        components: {
            ThemeTitle
        },
        setup(){
            const title =  provide("title", "自然地理"); 
            const {ctx} = getCurrentInstance();
            const numList = [
                2,5,1,3,8,0
            ]
            const tableList = [
                ["海南山金矿业",34,34,34,34],
                ["海南矿业有限公司",34,34,34,34]
            ]
            const kuangshanList = [
                {name:'温度',value:'5/91'},
                {name:'co',value:'5/91'},
                {name:'开停',value:'5/91'},
                {name:'风速',value:'5/91'}
            ]
            const weikuangList = [
                {name:'库水位',value:'5/91'},
                {name:'降雨量',value:'5/91'},
                {name:'干滩长度',value:'5/91'},
                {name:'气象预警',value:'5/91'}
            ]
            const videoList = [
                '海南山金矿山有限公司',
                '海南山金矿山有限公司',
                '海南山金矿山有限公司',
                '海南山金矿山有限公司',
                '海南山金矿山有限公司'
            ]
            const fengxianList = [
                '红旗尾矿库，近三日水位上升0.3m，请加强监管巡查',
                '红旗尾矿库，近三日水位上升0.3m，请加强监管巡查',
                '红旗尾矿库，近三日水位上升0.3m，请加强监管巡查',
                '红旗尾矿库，近三日水位上升0.3m，请加强监管巡查'
            ]
            const timeList = ['今天','本周','本月']
            const carouselList = [
                {imgSrc:"",dec:"海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"},
                {imgSrc:"",dec:"北以琼州海峡与广东划界，海南省是中华人民共和国最南端的省级行政区，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"},
                {imgSrc:"",dec:"西临北部湾与广西、越南相对，海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"}
            ]
            let options =  [
                {
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }]
            let optionValue =  '';
            function drawDuty(){
                var dom = document.getElementById("callPoliceChart");
                var myChart = ctx.$echarts.init(dom);
                
                    let color = [
                        "#0090FF",
                        "#36CE9E",
                        "#FFC005",
                        "#FF515A",
                        "#8B5CFF",
                        "#00CA69"
                    ];
                    let echartData = [{
                            name: "1",
                            value1: 100,
                            value2: 233
                        },
                        {
                            name: "2",
                            value1: 138,
                            value2: 233
                        },
                        {
                            name: "3",
                            value1: 350,
                            value2: 200
                        },
                        {
                            name: "4",
                            value1: 173,
                            value2: 180
                        },
                        {
                            name: "5",
                            value1: 180,
                            value2: 199
                        },
                        {
                            name: "6",
                            value1: 150,
                            value2: 233
                        },
                        {
                            name: "7",
                            value1: 180,
                            value2: 210
                        },
                        {
                            name: "8",
                            value1: 230,
                            value2: 180
                        }
                    ];

                    let xAxisData = echartData.map(v => v.name);
                    //  ["1", "2", "3", "4", "5", "6", "7", "8"]
                    let yAxisData1 = echartData.map(v => v.value1);
                    // [100, 138, 350, 173, 180, 150, 180, 230]
                    let yAxisData2 = echartData.map(v => v.value2);
                    // [233, 233, 200, 180, 199, 233, 210, 180]
                    const hexToRgba = (hex, opacity) => {
                        let rgbaColor = "";
                        let reg = /^#[\da-f]{6}$/i;
                        if (reg.test(hex)) {
                            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                        "0x" + hex.slice(3, 5)
                        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                        }
                        return rgbaColor;
                    }

                    let option = {
                        color: color,
                        legend: {
                            right: 10,
                            top: 10
                        },
                        tooltip: {
                            trigger: "axis",
                            formatter: function(params) {
                                let html = '';
                                params.forEach(v => {
                                    html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                                    <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                                    ${v.seriesName}.${v.name}
                                    <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                                    万元`;
                                })
                                return html
                            },
                            extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                            axisPointer: {
                                type: 'shadow',
                                shadowStyle: {
                                    color: '#ffffff',
                                    shadowColor: 'rgba(225,225,225,1)',
                                    shadowBlur: 5
                                }
                            }
                        },
                        grid: {
                            top: 5,
                            bottom:1,
                            containLabel: true
                        },
                        xAxis: [{
                            type: "category",
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}月',
                                textStyle: {
                                    color: "#fff"
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: "#D9D9D9"
                                }
                            },
                            data: xAxisData
                        }],
                        yAxis: [{
                            type: "value",
                            name: '单位：万千瓦时',
                            axisLabel: {
                                textStyle: {
                                    color: "#fff"
                                }
                            },
                            nameTextStyle: {
                                color: "#666",
                                fontSize: 12,
                                lineHeight: 40
                            },
                            splitLine: {
                                lineStyle: {
                                    type: "dashed",
                                    color: "#E9E9E9"
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        }],
                        series: [{
                            name: "2018",
                            type: "line",
                            smooth: true,
                            // showSymbol: false,/
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[0],
                                    shadowBlur: 3,
                                    shadowColor: hexToRgba(color[0], 0.5),
                                    shadowOffsetY: 8
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: ctx.$echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                                offset: 0,
                                                color: hexToRgba(color[0], 0.6)
                                            },
                                            {
                                                offset: 1,
                                                color: hexToRgba(color[0], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: hexToRgba(color[0], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: yAxisData1
                        }, {
                            name: "2019",
                            type: "line",
                            smooth: true,
                            // showSymbol: false,
                            symbolSize: 8,
                            zlevel: 3,
                            lineStyle: {
                                normal: {
                                    color: color[1],
                                    shadowBlur: 3,
                                    shadowColor: hexToRgba(color[1], 0.5),
                                    shadowOffsetY: 8
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: ctx.$echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [{
                                                offset: 0,
                                                color: hexToRgba(color[1], 0.6)
                                            },
                                            {
                                                offset: 1,
                                                color: hexToRgba(color[1], 0.1)
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: hexToRgba(color[1], 0.1),
                                    shadowBlur: 10
                                }
                            },
                            data: yAxisData2
                        }]
                    };
                
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            
            onMounted(()=>{
                drawDuty()
            })
            return {
                kuangshanList,
                weikuangList,
                timeList,
                tableList,
                fengxianList,
                videoList,
                title
            }
        }
    }
</script>
<style >
    table,table tr th, table tr td { border:1px solid #155e75 }
</style>
<style lang="stylus" scoped>
  @import '../../../assets/varibles.styl'
    .rightKs
        .realTime
            margin-top:vh(10)
            width:100%
            height:vh(150)
            display:flex
            justify-content:space-between
            flex-direction:column 
            .kuangshan
                display:flex
                justify-content:space-between
                .kuangshanL
                    width:vw(69)
                    height:vh(68)
                    line-height:vh(68)
                    text-align:center
                    background: url('/data/images/hngk/rece.png') no-repeat
                    background-size: 100% 100%
                .kuangshanR
                    width:vw(292)
                    height:vh(62)
                    display:flex
                    justify-content:space-around
                    align-items:center
                    div
                        display:flex
                        justify-content:space-around
                        flex-direction:column 
                        height:vh(62)
                        div:nth-child(1)
                            text-align:center
                            color:rgba(173,248,255,1)
                            font-size:vw(12)
                        div:nth-child(2)
                            width:vw(55)
                            height:vh(23)
                            line-height:vh(23)
                            text-align:center
                            background: url('/data/images/hngk/kuangshan.png') no-repeat
                            background-size: 100% 100%
            .weikuang
                display:flex
                justify-content:space-between
                .weikuangL
                    width:vw(69)
                    height:vh(68)
                    line-height:vh(68)
                    text-align:center
                    background: url('/data/images/hngk/rece.png') no-repeat
                    background-size: 100% 100%
                .weikuangR
                    width:vw(292)
                    height:vh(62)
                    display:flex
                    justify-content:space-around
                    align-items:center
                    div
                        display:flex
                        justify-content:space-around
                        flex-direction:column 
                        height:vh(62)
                        div:nth-child(1)
                            text-align:center
                            color:rgba(173,248,255,1)
                            font-size:vw(12)
                        div:nth-child(2)
                            text-align:center
                            width:vw(55)
                            height:vh(23)
                            line-height:vh(23)
                            background: url('/data/images/hngk/kuangshan.png') no-repeat
                            background-size: 100% 100%
        #callPoliceChart
            width:vw(365)
            height:vh(130)
        .wellTable  
            width:100%
            height:vh(120)
            table
                width: 100%
                height: vh(120)
                line-height: vh(40)
                text-align: center
                border-color: #155e75
                border-collapse: collapse
                tr:nth-child(1)
                    height:vh(25)
                    th
                        color:rgba(30,212,233,1)
                tr
                    color:#fff

        .fengxianList
            width:100%
            height:vh(120)
            div
                width:100%
                height:vh(30)
                line-height:vh(30)
                border-bottom:1px solid #155e75
                text-indent:vw(20)
        .videoQuery
            width:100%
            height:vh(150)
            display:flex
            justify-content:space-between
            align-items:flex-start
            .videoList
                flex:1
                height:vh(150)
                div
                    width:100%
                    height:vh(30)
                    line-height:vh(30)
                    border-bottom:1px solid #155e75
                    text-indent:vw(20)
                div:nth-child(1)
                    background: url('/data/images/hngk/video.png') no-repeat
                    background-size: 100% 100%
            .video
                flex:1
                margin-left:vw(10)
                img
                    width:vw(182)
                    height:vh(119)
                    border:1px solid #ddd
        .geoIntro
            width:vw(365)
            margin-top:vh(20)
            display:flex
            justify-content:space-between
            .geoIntroTitle
                margin-bottom:vh(13)
                display:flex
                .sideLine
                    width:vw(2)
                    height:vh(15)
                    margin-right:vw(10)
                    background: #86ceeb
                .geoIntroWord
                    color:#00EAFF
                    font-size:vw(16)
            .timeTabs
                float:right
                width:vw(165)
                height:vh(22)
                display:flex
                div
                    width:vw(55)
                    height:vh(22)
                    line-height:vh(22)
                    text-align:center
                    background: #012332
                    border: 1px solid #1398cf
                    cursor:pointer
                .active
                    border:1px solid #ddd
                    background:#023850
</style>